|
1
|
|
|
import { subDays } from 'date-fns'; |
|
2
|
|
|
import Calendar from '@event-calendar/core'; |
|
3
|
|
|
import DayGrid from '@event-calendar/day-grid'; |
|
4
|
|
|
import Interaction from '@event-calendar/interaction'; |
|
5
|
|
|
|
|
6
|
|
|
/** |
|
7
|
|
|
* @param {HTMLElement} target |
|
8
|
|
|
* @param {string} date |
|
9
|
|
|
* @param {any[]} events |
|
10
|
|
|
* @param {(startDate: Date, endDate: Date) => void} goToEventCreate |
|
11
|
|
|
*/ |
|
12
|
|
|
export function createCalendar(target, date, events, goToEventCreate) { |
|
13
|
|
|
const ec = new Calendar({ |
|
14
|
|
|
target, |
|
15
|
|
|
props: { |
|
16
|
|
|
plugins: [DayGrid, Interaction], |
|
17
|
|
|
options: { |
|
18
|
|
|
view: 'dayGridMonth', |
|
19
|
|
|
events, |
|
20
|
|
|
locale: 'fr', |
|
21
|
|
|
hiddenDays: [ |
|
22
|
|
|
6, // Saturday |
|
23
|
|
|
0 // Sunday |
|
24
|
|
|
], |
|
25
|
|
|
date, |
|
26
|
|
|
headerToolbar: { start: '', center: '', end: '' }, |
|
27
|
|
|
dayMaxEvents: true, |
|
28
|
|
|
eventStartEditable: false, |
|
29
|
|
|
eventDurationEditable: false, |
|
30
|
|
|
// TODO: add testid on days |
|
31
|
|
|
eventContent: ({ event }) => { |
|
32
|
|
|
const element = document.getElementById(`event-${event.id}`); |
|
33
|
|
|
|
|
34
|
|
|
return element ? { html: element.innerHTML } : event.title; |
|
35
|
|
|
}, |
|
36
|
|
|
dateClick: ({ event, date }) => { |
|
37
|
|
|
goToEventCreate(date, date); |
|
38
|
|
|
}, |
|
39
|
|
|
selectable: true, |
|
40
|
|
|
selectBackgroundColor: 'var(--background-action-violet)', |
|
41
|
|
|
select: ({ start, end }) => { |
|
42
|
|
|
// By default, range will stay selected if navigating using the back button. |
|
43
|
|
|
ec.unselect(); |
|
44
|
|
|
|
|
45
|
|
|
goToEventCreate(start, subDays(end, 1)); |
|
46
|
|
|
} |
|
47
|
|
|
} |
|
48
|
|
|
} |
|
49
|
|
|
}); |
|
50
|
|
|
} |
|
51
|
|
|
|
fairnesscoop /
permacoop
